<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Buttons &amp; Icons</title>
<link rel="icon" type="image/png" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<!--[if lt IE 9]>
<script src="scripts/ie9.js">IE7_PNG_SUFFIX=".png";</script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="stylesheets/style.css"> 
<link rel="stylesheet" href="stylesheets/responsive.css"> 
<script src="scripts/jquery.min.js"></script> 
<script src="scripts/js_func.js"></script>
</head>
<body>
<div class="wraper">
 <header class="header">
  <a class="logo" href="index.html">construct</a>
  <nav>
  <!-- top menu -->
   <ul>
    <li><a href="index.html">Home</a>
     <ul>
      <li><a href="index2.html">Home Version 2</a></li>
      <li><a href="index3.html">Home Version 3</a></li>
      <li><a href="index4.html">Home Version 4</a></li>
      <li><a href="index5.html">Home Version 5</a></li>
      <li><a href="index6.html">Home Version 6</a></li>
      <li><a href="index7.html">Home Version 7</a></li>
      <li><a href="index8.html">Home Version 8</a></li>
     </ul>
    </li>
    
    <li><a href="about.html">Pages</a>
     <ul>
      <li><a href="about.html">About Us</a></li>
      <li><a href="team.html">Team</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="process.html">Process</a></li>
      <li><a href="testimonials.html">Testimonials</a></li>
      <li><a href="contact_us.html">Contact Us</a></li>
      <li><a href="pricing.html">Pricing</a></li>
      <li><a href="faq.html">FAQ</a></li>
      <li><a href="left_nav.html">Left Nav</a></li>
      <li><a href="left_sidebar.html">Left Sidebar</a></li>
      <li><a href="right_nav.html">Right Nav</a></li>
      <li><a href="right_sidebar.html">Right Sidebar</a></li>
      <li><a href="full_width.html">Full Width</a></li>
     </ul>
    </li>
    <li><a href="short_text.html">Portfolio</a>
     <ul>
      <li><a href="short_text.html">Short Text Layout</a>
       <ul>
        <li><a href="short_text.html">1 Column</a></li>
        <li><a href="short_text2.html">2 Column</a></li>
        <li><a href="short_text3.html">3 Column</a></li>
        <li><a href="short_text4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="long_text.html">Long Text Layout</a>
       <ul>
        <li><a href="long_text_wide.html">1 Column Wide</a></li>
        <li><a href="long_text.html">1 Column</a></li>
        <li><a href="long_text2.html">2 Column</a></li>
        <li><a href="long_text3.html">3 Column</a></li>
        <li><a href="long_text4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="filtered.html">Filtered Layout</a>
       <ul>
        <li><a href="filtered.html">1 Column</a></li>
        <li><a href="filtered2.html">2 Column</a></li>
        <li><a href="filtered3.html">3 Column</a></li>
        <li><a href="filtered4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="right_sidebar.html">Right Sidebar</a>
       <ul>
        <li><a href="right_sidebar.html">1 Column</a></li>
        <li><a href="right_sidebar2.html">2 Column</a></li>
        <li><a href="right_sidebar3.html">3 Column</a></li>
       </ul>
      </li>
      <li><a href="left_sidebar.html">Left Sidebar</a>
       <ul>
        <li><a href="left_sidebar.html">1 Column</a></li>
        <li><a href="left_sidebar2.html">2 Column</a></li>
        <li><a href="left_sidebar3.html">3 Column</a></li>
       </ul>
      </li>
      <li><a href="gallery.html">Gallery Style</a>
       <ul>
        <li><a href="gallery.html">1 Column</a></li>
        <li><a href="gallery2.html">2 Column</a></li>
        <li><a href="gallery3.html">3 Column</a></li>
        <li><a href="gallery4.html">4 Column</a></li>
       </ul>
      </li>
      <li><a href="single_full.html">Portfolio Single Post</a>
       <ul>
        <li><a href="single_full.html">Full Width</a></li>
        <li><a href="single_right.html">Right Sidebar</a></li>
        <li><a href="single_left.html">Left Sidebar</a></li>
       </ul>
      </li>
     </ul>    
    </li>
    <li><a href="blog_post.html">Blog</a>
     <ul>
      <li><a href="blog_full_width.html">Full Width</a></li>
      <li><a href="blog_large.html">Large Image No Sidebar</a></li>
      <li><a href="blog_large_sidebar.html">Large Image With Sidebar</a></li>
      <li><a href="blog_medium_sidebar.html">Medium Image Right Sidebar</a></li>
     </ul>
    </li>
    <li><a href="shortcodes_typography.html">Shortcodes</a>
     <ul>
      <li><a href="shortcodes_typography.html">Typography</a></li>
      <li><a href="shortcodes_buttons_icons.html">Buttons</a></li>
      <li><a href="shortcodes_google_maps.html">Maps</a></li>
      <li><a href="shortcodes_content_sliders.html">Sliders</a></li>
      <li><a href="shortcodes_videos.html">Videos</a></li>
      <li><a href="shortcodes_pricing_tables.html">Tables</a></li>
      <li><a href="shortcodes_alerts_boxes.html">Boxes</a></li>
      <li><a href="shortcodes_accordions_tabs_toggles.html">Tabs</a></li>
     </ul>
    </li>
   </ul>
  <!-- /top menu -->
  </nav>
 </header>
</div> 

<div class="content_block">
 <!-- top_title -->
 <div class="top_title">
  <div class="wraper">
   <h2>Buttons &amp; Icons<span>Shortocdes for your enjoyment</span></h2>
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Shortcodes</a></li>
    <li>Buttons &amp; Icons</li>
   </ul>
  </div>
 </div>
 <!-- /top_title -->
 <div class="wraper">
  <h4 class="bord">Buttons</h4>
  <!-- buttons -->
  <div class="buttons c_after">
   <input type="submit" value="Large Button" class="btn_l" />
   <input type="submit" value="Medium Button" class="btn_m" />
   <input type="submit" value="Small Button" class="btn_s" />
   <div>
    <a class="btn_col" href="#">Learn More</a>
    <a class="btn_col btn_blue" href="#">Learn More</a>
    <a class="btn_col btn_green" href="#">Learn More</a>
    <a class="btn_col btn_red" href="#">Learn More</a>
    <a class="btn_col btn_orange" href="#">Learn More</a>
    <a class="btn_col btn_yellow" href="#">Learn More</a>
    <a class="btn_col btn_grey" href="#">Learn More</a>
    <a class="btn_col btn_black" href="#">Learn More</a>
   </div>
  </div>
  <!-- buttons -->
  <h4 class="bord">Social Icons</h4>
  <!-- Social Icons -->
  <div class="social_icons">
   <ul>
    <li><a class="facebook" href="#">facebook</a></li>
    <li><a class="tweeter" href="#">tweeter</a></li>
    <li><a class="in" href="#">in</a></li>
    <li><a class="baby" href="#">baby</a></li>
    <li><a class="rss" href="#">rss</a></li>
    <li><a class="google" href="#">google</a></li>
    <li><a class="www" href="#">www</a></li>
   </ul>
   <ul class="small">
    <li><a class="facebook" href="#">facebook</a></li>
    <li><a class="tweeter" href="#">tweeter</a></li>
    <li><a class="in" href="#">in</a></li>
    <li><a class="baby" href="#">baby</a></li>
    <li><a class="rss" href="#">rss</a></li>
    <li><a class="google" href="#">google</a></li>
    <li><a class="www" href="#">www</a></li>
   </ul>
  </div>
  <div class="social_icons3">
   <ul>
    <li><a class="facebook" href="#">facebook</a></li>
    <li><a class="tweeter" href="#">tweeter</a></li>
    <li><a class="in" href="#">in</a></li>
    <li><a class="baby" href="#">baby</a></li>
    <li><a class="rss" href="#">rss</a></li>
    <li><a class="google" href="#">google</a></li>
    <li><a class="www" href="#">www</a></li>
   </ul>
   <ul class="small">
    <li><a class="facebook" href="#">facebook</a></li>
    <li><a class="tweeter" href="#">tweeter</a></li>
    <li><a class="in" href="#">in</a></li>
    <li><a class="baby" href="#">baby</a></li>
    <li><a class="rss" href="#">rss</a></li>
    <li><a class="google" href="#">google</a></li>
    <li><a class="www" href="#">www</a></li>
   </ul>
  </div>
  <!-- /Small Icons -->     
  <h4 class="bord clear">Small Icons</h4>
  <!-- Small Icons -->
  <div class="small_icons c_after">
   <ul>
    <li class="design"><a class="circle_link" href="#">&nbsp;</a></li>
    <li class="flexible"><a class="circle_link" href="#">&nbsp;</a></li>
    <li class="fonts"><a class="circle_link" href="#">&nbsp;</a></li>
    <li class="ultra"><a class="circle_link" href="#">&nbsp;</a></li>
    <li class="support"><a class="circle_link" href="#">&nbsp;</a></li>
    <li class="easy"><a class="circle_link" href="#">&nbsp;</a></li>
    <li class="color"><a class="circle_link" href="#">&nbsp;</a></li>
    <li class="updates"><a class="circle_link" href="#">&nbsp;</a></li>
   </ul>
  </div>
  <!-- /Small Icons -->     
  <h4 class="bord">Medium Icons</h4>
  <!-- Medium Icons -->
  <div class="medium_icons c_after">
   <ul>
    <li class="design"><a class="circle_link" href="#">&nbsp;</a></li>
    <li class="flexible"><a class="circle_link" href="#">&nbsp;</a></li>
    <li class="fonts"><a class="circle_link" href="#">&nbsp;</a></li>
    <li class="support"><a class="circle_link" href="#">&nbsp;</a></li>
    <li class="easy"><a class="circle_link" href="#">&nbsp;</a></li>
    <li class="color"><a class="circle_link" href="#">&nbsp;</a></li>
   </ul>
  </div>
  <!-- /Medium Icons -->     
  <h4 class="bord">Large Icons</h4>
  <!-- Large Icons -->
  <div class="large_icons c_after">
   <ul>
    <li class="design"><a class="circle_link" href="#">&nbsp;</a></li>
    <li class="flexible"><a class="circle_link" href="#">&nbsp;</a></li>
    <li class="support"><a class="circle_link" href="#">&nbsp;</a></li>
    <li class="easy"><a class="circle_link" href="#">&nbsp;</a></li>
    <li class="seo"><a class="circle_link" href="#">&nbsp;</a></li>
   </ul>
  </div>
  <!-- /Large Icons -->     
 </div>
</div>

<!-- footer -->
<!-- social block -->
<div class="social_block">
 <div class="wraper">
  <p>Stay connected with us in your favorite flavor!</p>
  <ul>
   <li class="facebook"><a href="#">Facebook</a></li>
   <li class="twitter"><a href="#">Twitter</a></li>
   <li class="linkedin"><a href="#">LinkedIn</a></li>
   <li class="rss"><a href="#">RSS</a></li>
   <li class="dribbble"><a href="#">Dribbble</a></li>
   <li class="google"><a href="#">Google+</a></li>
  </ul>
 </div>
</div>
<!-- /social block -->

<div class="footer">
 <footer>
  <!-- bottom about -->
  <div class="bottom_about">
   <p><img src="images/logo.png" alt="" /></p>
   <p>At vero eos et accusaus et iusto unir un dignissimos ducimus quirds siter ters pi blranditiis praesentium amets voluptatum un deleniti atque corrupti quosdirs dolores etra quasir moltias unstw excepturi sinte amets occaecatires.</p>
  </div>
  <!-- /bottom about -->
  <!-- recent tweets -->
  <div class="recent_tweets">
   <h3><span>Recent Tweets</span></h3>
   <ul>
    <li><a href="#">@laurakalbag</a> I will be very soon. Ase result reco endation <a href="#">31 minutes ago</a></li>
    <li><a href="#">@laurakalbag</a> you got chocolates!? That's i I'm signing up. <a href="#">37 minutes ago</a></li>
   </ul>
  </div>
  <!-- /recent tweets -->
  <!-- recent posts -->
  <div class="recent_posts">
   <h3><span>Recent Posts</span></h3>
   <ul>
    <li><a href="#">Lorem ipsum dolo amet consecect</a></li>
    <li><a href="#">Sed laoreet neque nonte mauris </a></li>
    <li><a href="#">Metus lacus, porta vestibulum</a></li>
    <li><a href="#">Morbi ac magna est ornare eliticits</a></li>
    <li><a href="#">Voluptas sadips nemis un etras</a></li>
   </ul>
  </div>
  <!-- /recent posts -->
  <!-- subscribe block -->
  <div class="subscribe_block">
   <h3><span>Stay Connected</span></h3>
   <form method="post" action="#">
    <p><input type="text" id="name" value="NAME ..." /></p>
    <p><input type="text" id="email" value="EMAIL ..." /></p>
    <p><input type="submit" value="Subscribe" /></p>
   </form>
  </div>
  <!-- /subscribe block -->
 </footer>
</div>

<!-- copyright -->
<div class="copyright">
 <div class="wraper">
  <p><span>Copyright 2012 Construct</span>All Rights Reserved<a href="#">RSS</a><a href="#">Comments</a></p>
  <a class="top" href="#">Back to the top</a>
 </div>
</div>
<!-- /copyright -->
<!-- /footer -->
</body>
</html> 
